<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">用户列表</div>
        <div class="layui-card-body">
            <table id="userlist" lay-filter="userFilter"></table>
        </div>
    </div>
</div>
<!--用户信息对话框-->
<div id="userInfoDialog">
    <table class="layui-table" lay-size="sm">
        <tr>
            <td>用户名</td>
            <td><span id="username"></span></td>
        </tr>
        
        <tr>
            <td>性别</td>
            <td><span id="sex"></span></td>
        </tr>
        <tr>
            <td>电话</td>
            <td><span id="phone"></span></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><span id="status"></span></td>
        </tr>
        <tr>
            <td>注册时间</td>
            <td><span id="addtime"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><span id="password"></span></td>
        </tr>
        <tr>
            <td>盐</td>
            <td><span id="salt"></span></td>
        </tr>
        <tr>
            <td>头像</td>
            <td><span id="img"></span></td>
        </tr>
    </table>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //加载获取table模块
        var table = layui.table;
        //加载获取layer弹层模块
        var layer = layui.layer;
        //加载jquery对象
        var $ = layui.jquery;

        table.render({
            elem:'#userlist',                              //用于渲染数据的表格元素选择器
            url:'http://127.0.0.1:8080/user/list',         //服务端数据接口
            page:{//分页配置
                curr:1,
                limit:10,
                limits:[5,10,20,30]

            },                                      //开启分页
            cols:[[
                {type:'checkbox'},
                {title:'序号',type:'numbers'},
                {title:'ID',field:'id'},
                {title:'用户账号',field:'username'},
                {title:'用户性别',field:'sex',templet:function(d){
                    if(d.sex === 1){
                        return '男'
                    }
                    return '女'
                }},
                {title:'创建时间',field:'addtime',templet:'<div>{{ layui.util.toDateString(d.addtime,"yyyy年MM月dd日 HH时mm分ss秒") }}</div>'},
                {title:'账号状态',field:'status',templet:function(d){
                    if(d.status === 0){
                        return '<div class="layui-badge layui-bg-blue">正常</div>'
                    }
                    return '<div class="layui-badge layui-bg-red">禁用</div>'
                }},
                { title: '操作', templet: '#rowTools', width: 300 },
            ]]
        })

        //绑定单元格工具事件
        table.on('tool(userFilter)', function (obj) {
            //获取被点击元素的lay-event值，通过该值确定哪个按钮被点击
            let e = obj.event
            switch (e) {
                case 'details':
                    //详情查看
                    layer.open({
                        type:1,                                //弹层类型 1：页面层
                        content:$('#userInfoDialog'),         //弹层dom元素
                        closeBtn:2,                           //标题栏关闭图标样式  
                        shadeClose:true,
                        success:function(layero,index,that){  //弹层被成功打开后回调  
                            layero.find('#username').text(obj.data.username)
                            layero.find('#sex').html(obj.data.sex===1 ? '男' : '女')
                            layero.find('#phone').text(obj.data.phone)
                            layero.find('#addtime').text(obj.data.addtime)
                            layero.find('#status').html(obj.data.status===0 ? '<div class="layui-badge layui-bg-blue">正常</div>' : '<div class="layui-badge layui-bg-red">禁用</div>')
                            layero.find('#password').text(obj.data.password)
                            layero.find('#salt').text(obj.data.salt)
                            layero.find('#img').html(`<div><img src="${obj.data.img}" height="100px"></div>`)
                        },
                        btn:['关闭'],   //自定义按钮
                        btnAlign:'c',   //自定义按钮位置 l-左  c-中  r-右
                        btn1:function(){    //自定按钮事件
                            layer.closeAll()
                        }
                    })
                    break;
                case 'del':
                    //删除
                    layer.confirm('确认删除该用户吗?', { icon: 3 }, function () {
                        $.ajax({
                            url: `http://127.0.0.1:8080/user/del/${obj.data.id}`,
                            type: 'DELETE',
                            success: function (resp) {
                                if (resp.code === 0) {
                                    layer.msg(resp.msg)
                                    //删除dom结构，并更新缓存
                                    obj.del()
                                } else {
                                    layer.alert(resp.msg, { icon: 2 })
                                }
                            }
                        })
                    })
                    break;
                case 'updateStatus':
                    //緩存當前被點擊的按鈕對象
                    let btn = $(this)
                    //修改状态
                    layer.confirm('确认修改吗?',{ icon: 3 }, function () {
                        //获取需要修改的数据行id
                        let id = obj.data.id
                        //获取需要修改成为状态
                        let status = btn.data('status')                       
                        //将数据封装为一个js对象
                        let data = {
                            id: id,
                            status: status
                        }
                        //发送ajax请求
                        $.ajax({
                            url: 'http://127.0.0.1:8080/user/update',
                            type: 'PUT',
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (resp) {
                                if (resp.code === 0) {
                                    layer.msg(resp.msg)
                                    //重新加载表格数据
                                    table.reloadData('userlist', {
                                        scrollPos: 'fixed'  // 保持滚动条位置不变 
                                    })
                                } else {
                                    layer.alert(resp.msg, { icon: 2 })
                                }
                            }
                        })
                    })
                    break;
            }
        })
    })
</script>


<!--操作栏自定义模板-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button id="del" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        {{# if(d.status === 0){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
    </div>
</script>


</body>
</html>